<!-- 参政议政 -->
<template>
  <Pannel @load="handleLoadData" @refresh="handleRefresh">
    <view class="pannel-inner-box">
      <NavBar theme="#fff" title="党员信息"></NavBar>
      <view class="bg-image"></view>
      <!-- <PickerYear class="picker-year"></PickerYear> -->
      <view class="area-1">
        <view class="header">
          <view class="header-image">
            <image class="image" :src="headerImg" mode="scaleToFill" />
          </view>
          <view class="header-text">医药高新区(高港区)四支部</view>
        </view>
        <view class="list">
          <view class="item" @click="onJump({ url: '/subPack/dyxs/list' })">
            <view class="num-iocn">
              <view class="num">{{ indexData.dyrs || 0 }}</view>
              <view class="icon iconfont icon-youyi"></view>
            </view>
            <view class="text">党员总数</view>
          </view>
          <view class="item">
            <view class="num">{{ indexData.dyrs || 0 }}</view>
            <view class="text">今年新增</view>
          </view>
          <view class="item" @click="onJump({ url: '/subPack/dyxs/score' }, year)">
            <view class="num-iocn">
              <view class="num">{{ indexData.yearScore }}</view>
              <view class="icon iconfont icon-youyi"></view>
            </view>
            <view class="text">全年总分</view>
          </view>
        </view>
      </view>

      <CardWrap
        class="area-2"
        title="党费收缴与支出分析"
        width="686rpx"
      >
        <view class="card-box">
          <view class="left-box">
            <view class="icon-image">
              <image class="image" :src="moneyImg" mode="scaleToFill" />
            </view>
            <view class="msg">
              <view class="num">{{ indexData.payIn || 0 }}</view>
              <view class="text">党费收缴</view>
            </view>
          </view>

          <view class="right-box">
            <view class="msg">
              <view class="text">支出</view>
              <view class="num">{{ indexData.payOut || 0 }}</view>
            </view>
            <view class="msg">
              <view class="text">结余</view>
              <view class="num">{{ indexData.payIn - indexData.payOut }}</view>
            </view>
          </view>
        </view>
        <view class="charts-box">
          <qiunDataCharts
            class="qiun_data_charts"
            type="line"
            :ontouch="true"
            :inScrollView="true"
            :canvas2d="true"
            :canvasId="canvasId"
            :opts="option1.opts"
            :chartData="option1.data"
          />
        </view>
      </CardWrap>
      <CardWrap
        class="area-3"
        title="党员结构分析"
        width="686rpx"
      >
        <Tabs :tabs="['年龄', '学历', '性别']" @change="handleChangePie"></Tabs>
        <view class="charts-box pie">
          <qiunDataCharts
            class="qiun_data_charts"
            type="ring"
            :ontouch="true"
            :inScrollView="true"
            :canvas2d="true"
            :canvasId="canvasId"
            :opts="option2.opts"
            :chartData="option2.data"
          />
        </view>
      </CardWrap>
      <CardWrap class="area-4" title="党员获奖排行" width="686rpx">
        <Tabs
          :tabs="['本职工作获奖', '民革工作获奖']"
          @change="handleListTab"
        ></Tabs>
        <view v-if="indexData.lists && indexData.lists.length">
          <ListIndex :lists="indexData.lists[curListIndex]"></ListIndex>
        </view>
      </CardWrap>
    </view>
  </Pannel>
</template>

<script lang="ts" setup>
/* 
         :ontouch="true"
            :inScrollView="true"
                  :canvas2d="true"
*/

import headerImg from "./static/base64/header";
import moneyImg from "./static/base64/money";

import CardWrap from "./components/CardWrap.vue";
import Tabs from "./components/Tabs.vue";
import ListIndex from "./components/ListIndex.vue";
import qiunDataCharts from "./components/qiun_data_charts/index.vue";

import { requestPost, requsetAll } from "@/hooks/api";
import { useYear } from "@/store/index";
import useOption1 from "./hooks/doubleline";
import useOption2 from "./hooks/pie";
import { ref, watch } from "vue";
import useDetail from "@/store/detail";

import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";

let year = ref('2025') as any;
onLoad((options: any) => {
  year.value = options.year;
  console.log('136')
})

const [ detail, setDetail ] = useDetail();

const [option1, setOption1] = useOption1();
const [option2, setOption2] = useOption2();

// 党员总览信息
const [data1, fetchData1] = requestPost("/ascreen/home/payHomeInfo/ajax");
//  党费收支情况
const [data2, fetchData2] = requestPost("/ascreen/home/payHomeInfo/ajax");
//  年龄比例分布
const [data3, fetchData3] = requestPost("/ascreen/home/dyInfo/ajax");
// 男女比例分布
const [data4, fetchData4] = requestPost("/ascreen/home/sex/ajax");
//  学历分布
const [data5, fetchData5] = requestPost("/ascreen/home/education/ajax");
//  党员获奖排行
const [data6, fetchData6] = requestPost("/ascreen/home/bzgzhjPhApp/ajax");
//  今年新增
const [data7, fetchData7] = requestPost("/ascreen/home/zzfzHomeList/ajax");
//  全年总分
const [data8, fetchData8] = requestPost(
  "/ascreen/home/partyMemberHomeScoreList/ajax"
);

let curPieIndex = ref(0) as any;
const pies = [data3, data5, data4];
watch(curPieIndex, (val: any) => {
  let _data = [];

  switch (val) {
    case 0:
      _data = data3.value.nlfb;
      break;
    case 1:
      _data = data5.value.values;
      break;
    case 2:
      _data = data4.value.values;
      break;
  }

  setOption2(_data);
});

//  切换图表
const handleChangePie = (idx: any) => {
  curPieIndex.value = idx;
};

const curListIndex = ref(0);
watch(curListIndex, (val: any) => {});
//  切换列表
const handleListTab = (idx: any) => {
  curListIndex.value = idx;
};

const onJump = (data: any, params: any) => {
  setDetail(params);
  uni.navigateTo(data);
};

//  下拉刷新
const handleRefresh = async (callback: any) => {
  callback( fetchAll );
};


const handleLoadData: any = (callback: any): any => {
  callback(fetchAll);
};

//  获取数据
async function fetchAll() {
  const arr: any[] = [
    fetchData1,
    fetchData2,
    fetchData3,
    fetchData4,
    fetchData5,
    fetchData6,
    fetchData7,
    fetchData8,
  ].map((_s) => {
    return _s({ year: detail.value });
  });

  await requsetAll(arr);

  //  加工数据
  formatHomeData();
  //  加工图表
  setOption1(data1.value.values);
  setOption2(indexData.value.pies[curPieIndex.value]);
}

const indexData = ref({}) as any;
function formatHomeData() {
  indexData.value = {
    dyrs: data1.value.memberCount,
    payIn: data1.value.payIn,
    payOut: data1.value.payOut,
    lineData: data1.value.values,
    pies: [data3.value.nlfb, data5.value.values, data4.value.values],
    lists: [data6.value.bzPhs || [], data6.value.mgPhs || []].map((_s) =>
      _s.slice(0, 6)
    ),
    yearScore: data8.value.all,
    addPerson: data7.value.zzfzs?.length,
  };
}
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 400rpx;
  background: linear-gradient(180deg, #d79557, #dfbc92);
  z-index: 0;
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;

  .area-1 {
    width: 686rpx;
    height: 388rpx;
    margin-top: 200rpx;
    background: linear-gradient(180deg, #ffecd1, #ffffff);
    border: 3rpx solid #ffffff;
    border-radius: 16rpx;
    z-index: 1;

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;

      .header-image {
        margin-top: 44rpx;
        width: 96rpx;
        height: 96rpx;
      }

      .header-text {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #424242;
        font-weight: bold;
      }
    }

    .list {
      display: flex;
      margin-top: 50rpx;
      width: 100%;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .num {
          font-size: 36rpx;
          color: #424242;
          font-weight: bold;
        }

        .text {
          margin-top: 20rpx;
          font-size: 26rpx;
          color: #999da5;
        }

        .num-iocn {
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            margin-left: 10rpx;
            color: #e4c59f;
          }
        }
      }
    }
  }

  .area-2 {
    margin-top: 20rpx;

    .card-box {
      display: flex;
      align-items: center;
      width: 622rpx;
      height: 130rpx;
      background: #f6f6f6;
      border-radius: 8rpx;

      .left-box {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 4rpx solid #eaeaea;
        box-sizing: border-box;

        .icon-image {
          width: 80rpx;
          height: 80rpx;
        }

        .msg {
          margin-left: 24rpx;

          .num {
            font-size: 32rpx;
            font-weight: bold;
          }

          .text {
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #666666;
          }
        }
      }

      .right-box {
        flex: 1;

        padding-left: 48rpx;
        padding-right: 40rpx;
        box-sizing: border-box;

        .msg {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;

          .text {
            font-size: 24rpx;
          }

          .num {
            font-size: 28rpx;
            font-weight: bold;
          }

          &:nth-child(2) {
            margin-top: 14rpx;

            .num {
              color: #ff6430;
            }
          }
        }
      }
    }

    .charts-box {
      position: relative;
      width: 100%;
      height: 600rpx;

      &.pie {
        height: 400rpx;
      }

      .qiun_data_charts {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .area-3 {
    margin-top: 20rpx;
  }

  .area-4 {
    margin-top: 20rpx;
  }
}
</style>
